<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="85%" destroy-on-close @closed="$emit('closed')" align-center :show-close="false" :close-on-press-escape="false" class="screen panel-item hidden-sm-and-down" id="screen">
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass">{{titleMap[mode]}}</h4>
                <div class="flex">
                    <el-button plain icon="el-icon-FullScreen" @click="toScreen" style="margin-right:15px;"></el-button>
                    <el-icon @click="close" class="el-icon--left" size="24" color="#909399" style="cursor: pointer;">
                        <el-icon-Close></el-icon-Close>
                    </el-icon>
                </div>
                <!-- <el-button type="danger">
                    Close
                </el-button> -->
            </div>
        </template>
        <el-container>
            <el-header style="height: 50px;border-bottom:none;">
                <div class="left-panel">
                    <el-button type="primary" @click="back">确定</el-button>
                    <el-button @click="visible = false">取 消</el-button>
                    <div class="finish">
                        <div class="finishNum">销售总数量:
                            <div class="text">{{ total.total_number }}</div>
                        </div>
                        <div class="finishNum">勾选总数量:
                            <div class="text">{{ total.selection }}</div>
                        </div>
                    </div>
                <el-button type="warning" :disabled="selection.length == 0" @click="exportExcel">导出</el-button>
                </div>
            </el-header>
            <el-header>
                <div class="left-panel">
                </div>
                <div class="right-panel">
                    <div class="right-panel-search">
                        <el-input v-model="search.contract_code" placeholder="请输入销售单号" clearable @keyup.enter="upsearch"></el-input>
                        <el-input v-model="search.customer" placeholder="请输入客户" clearable @keyup.enter="upsearch"></el-input>
                        <el-input v-model="search.goods_model" placeholder="请输入产品型号" clearable @keyup.enter="upsearch"></el-input>
                        <el-date-picker v-model="search.open_single" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 230px" />
                        <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                        <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
                    </div>
                </div>
            </el-header>
            <el-main class="nopadding">
                <scTable ref="table" row-key="id" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border :height="!fullscreen ? 650 : 850" :cell-style="cellStyle" @setExtend="setExtend" show-summary :params="query">
                    <el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
                    <el-table-column type="index" label="序号" fixed align="center" width="60"></el-table-column>
                    <el-table-column label="产品型号" prop="goods.goods_model" align="center"></el-table-column>
                    <el-table-column label="颜色" prop="" align="center" width="100">
                        <template #default="scope">
                            {{scope.row.color_name}}
                        </template>
                    </el-table-column>
                    <el-table-column label="方向" prop="" align="center" width="100">
                        <template #default="scope">
                            {{scope.row.direction_name}}
                        </template>
                    </el-table-column>
                    <el-table-column label="速比" prop="goods.speedRatio.name" align="center" width="100"></el-table-column>
                    <el-table-column label="法兰" prop="goods.flange.name" align="center" width="100"></el-table-column>
                    <el-table-column label="孔数" align="center" width="80">
                        <template #default="scope">
                            {{scope.row.hole}}
                        </template>
                    </el-table-column>
                    <el-table-column label="数量" prop="sale_num" align="center" width="80"></el-table-column>
                    <el-table-column label="使用现货" align="center" width="100">
                        <template #default="scope">
                            {{scope.row.is_stock ? '是' : '否'}}
                        </template>
                    </el-table-column>
                    <el-table-column label="客户" prop="customer_name" align="center" width="120"></el-table-column>
                    <el-table-column label="备注1" prop="" align="center">
                        <template #default="scope">
                            {{scope.row.remark1}}
                        </template>
                    </el-table-column>
                    <el-table-column label="备注2" prop="" align="center">
                        <template #default="scope">
                            {{scope.row.remark2}}
                        </template>
                    </el-table-column>
                    <el-table-column label="销售日期" prop="open_single" align="center" width="100"></el-table-column>
                    <el-table-column label="销售单号" prop="contract_code" align="center" width="120"></el-table-column>
                </scTable>
            </el-main>
        </el-container>
            <!--  v-if="!fullscreen" -->
		<!-- <template #footer>
			<el-button @click="visible = false">取 消</el-button>
		</template> -->
        <!-- <el-footer v-if="fullscreen" style="text-align: right;position: fixed;bottom: 0;right: 0;left: 0;padding: 10px 20px;background: #fff;border-top: 1px solid #eee;">
			<el-button @click="visible = false">取 消</el-button>
		</el-footer> -->
	</el-dialog>
</template>

<script>
export default {
    props:{
        query: { type: Object, default: () => ({}) },
    },
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '选择销售',
				edit: '编辑销售',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
			apiObj: this.$API.contract.contract.getAllGoods,
			selection: [],
			search: {
				contract_code: null,
				customer: null,
				open_single: null,
			},
            total: {
                total_number: 0,
                selection: 0,
            },
            fullscreen: false
		}
	},
	mounted() {
	},
	methods: {
        toScreen(){
            this.fullscreen = !this.fullscreen
            this.$TOOL.screen(document.getElementById('screen'))
        },
        setExtend(data){
            this.total.total_number = data.total_number
        },
        cellStyle(row){
            let cellStyle = '';
            switch(row.row.is_stock){
                case 1:
                    cellStyle = {color:'#000',backgroundColor:'rgba(255, 63, 13, 0.1)'}
                    break;
                default:
                    cellStyle = {color:'#000',backgroundColor:'#ffffff'}
            }
            return cellStyle
        },
		// 显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
        // 选择事件
        selectionChange(selection) {
            // this.$emit('success', selection)
            // this.visible = false;
            this.selection = selection;
            let selectionNum = 0
            selection.forEach(item => {
                selectionNum = selectionNum + item.sale_num
            });
            this.total.selection = selectionNum
		},
        // 选中返回
        back(){
            this.$emit('success', this.selection,this.type)
            this.visible = false;
        },
        //搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
        refresh(){
            for (const key in this.search) {
                this.search[key] = null;
            }
            this.$refs.table.upData(this.search)
        },
        async exportExcel(){
            var ids = this.selection.map(v => v.id)
            let query = {
                export:2,
                id: ids
            }
            var res = await this.$API.contract.contract.getAllGoods.get(query);
            if (res.code == 2) {
                const fileUrl = res.data.url;
                const link = document.createElement("a");
                link.href = fileUrl;
                link.download = fileUrl;
                link.click();
            } else {
                this.$alert(res.message, "提示", { type: "error" });
            }
        },
	}
}
</script>

<style>
.flex{
    display: flex;
    align-items: center;
}
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
}
.el-table__body tr:hover > td{
    background: #e6e6e6 !important;
}
</style>
